<template>
  <el-dialog width="60vw" v-model="showDialog" :close-on-click-modal="false" :modal-append-to-body="false"
    :close-on-press-escape="false">
    <template #header>
      <span>{{ title ? "选区数据 - " + title : "选区数据" }}</span>
    </template>
    <div class="container">
      <el-table :data="tableData" stripe height="65vh" v-loading="loading">
        <el-table-column type="index" width="50" label="#" align="center" />
        <el-table-column prop="county" label="省市区" width="80" align="center" />
        <el-table-column prop="netType" label="网络制式" width="80" align="center" />
        <!-- <el-table-column prop="neName" label="小区名称">
          <template #default="scope" v-if="scope.row.netType === '4g'">
            {{ scope.row.neName }}
          </template>
          <template #default="scope" v-if="scope.row.netType === '5g'">
            {{ scope.row.neName }}
          </template>
        </el-table-column> -->
        <el-table-column prop="neName" label="小区名称" />
        <el-table-column prop="perception" label="用户感知" width="80" align="center" />
        <el-table-column prop="alarm" label="告警故障" width="80" align="center" />
        <el-table-column prop="profit" label="价值收益" width="80" align="center" />
        <el-table-column prop="quality" label="网络质量" width="80" align="center" />
        <el-table-column prop="env" label="机房环境" width="80" align="center" />
        <el-table-column prop="total" label="总分" width="80" align="center" />
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";

// api相关 - 工具
import { apiCommon } from "@/utils/index.js";
import * as gisApi from "@/api/gis/gis";

// 组件传参
import mittBus from "@/utils/mittBus"; // mitt

const showDialog = ref(false);

const tableData = ref([]);

let title = ref("");
let loading = ref(true)

/**
 * 父组件调弹框显示方法
 */
const show = (val) => {
  showDialog.value = true;

  setPolygonData(val);

  mittBus.emit("setCancelPolygonBtn");
};

// 获取多边形数据
const setPolygonData = async ({ lonlat, name }) => {
  // console.log("设置多边形数据", val, JSON.stringify(val));
  // console.log(name);

  title.value = name;

  // 获取接口数据接口
  let params = {
    coordinates: lonlat,
  };

  let areaHealthInfo = await apiCommon(gisApi.queryAreaHealthInfo, params);
  tableData.value = areaHealthInfo.data;

  loading.value = false
};

defineExpose({ show });
</script>
<style lang="scss" scoped></style>
